<template>
	<view>
		<block v-for="(item,index) in collectionList">
			<view class="list flex align-center">
				<image :src="item.obj_img_url"></image>
				<view class="flex flex flex-direction">
					<text>{{item.obj_title}}</text>
					<view class="list-bot flex align-center justify-between">
						<text class="text-price">{{item.obj_price}}</text>
						<text @click="showPop(item)">···</text>
					</view>
				</view>
			</view>
		</block>
		<!-- #ifdef MP-ALIPAY -->
		<view class="empty"><u-empty text="暂无收藏" mode="list" v-if="collectionList.length==0"></u-empty></view>
		<!-- #endif -->
		<view v-if="isShowPop" class="popup">
			<view class="popup-con">
				<view class="popup-con-top flex flex-direction align-center justify-center">
					<view class="flex align-center justify-center">
						<text class="lg text-gray cuIcon-favorfill"  @tap="cancelCollect"></text>
					</view>
					<text @tap="cancelCollect">取消收藏</text>
				</view>
				<view @click="close" class="popup-con-btn">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				isShowPop:false,
				collectionList:[],
				cancelCollecttion:'',
			}
		},
		onShow() {
		  this.loadCollection()	
		},
		onLoad(){
			this.loadCollection()
		},
		methods: { 
			loadCollection:function(){
				try {
					var userId = uni.getStorageSync('user').user_id;
					api.get({
						url: 'User/GetCollectList',
						data: {
							seach:'',
							user_id: userId,
							page:1,
							pagesize:30
						},
						success: data => {
							console.log(JSON.stringify(data) )
							if (data.ErrCode == 0) {
								this.collectionList = data.Response
							}
						}
					});
				} catch (e) {
					uni.showModal({
						title: '提示',
						content: '账号超时，请重新登陆',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				}
			},
			cancelCollect(){
				api.get({
					url: 'User/GetCollectDelete',
					data: {
						collect_id:this.cancelCollecttion.id,
					},
					success: data => {
						console.log(data)
						if (data.ErrCode == 0) {
							uni.showToast({
								title:'取消成功'
							})
							this.isShowPop=false
							uni.navigateTo({
								url:'/module/my/myCollection/myCollection'
							})
						}
					}
				});
			},
			close(){
				this.cancelCollecttion = ''
				this.isShowPop=false
			},
			showPop(item){
				this.cancelCollecttion = item
				this.isShowPop=true
			}
		}
	}
</script>

<style>
	.empty{
		height: 500rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup-con{
		width: 100%;
		position: absolute;
		bottom: 0;
	}
	.popup-con-btn{
		width: 100%;
		background-color: #fff;
		height: 84upx;
		text-align: center;
		line-height: 84upx;
		font-size: 30upx;
	}
	.popup-con-top>text{
		font-size: 22upx;
			color: #666666;
			margin-top: 10upx;
	}
	.popup-con-top>view{
		width: 90upx;
			height: 90upx;
			background-color: #ffffff;
			border-radius: 8upx;
	}
	.popup-con-top>view>text{
		color: #f8a300;
		font-size: 40upx;
	}
	.popup-con-top{
		height: 167upx;
		width: 100%;
		background-color: rgba(255,255,255,0.9);
	}
	.popup{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.3);
	}
	.list-bot{
		margin-top: 20upx;
	}
	.list-bot>text:nth-child(1){
		font-size: 32upx;
		color: #ed0000;
		font-weight: 500;
	}
	.list-bot>text:nth-child(2){
		font-weight: bold;
		color: #b0b0b0;
		font-size: 46upx;
	}
	.list>view>text{
		margin-top: 20upx;
			font-size: 28upx;
			color: #000000;
	}
	.list>view{
		width: 464upx;
		height: 204upx;
		border-bottom: 1upx solid #ddd;
		margin-left: 20upx;
		padding-right: 20upx;
		box-sizing: border-box;
	}
	.list image{
		width: 266upx;
		height: 200upx;
	}
	.list{
		width: 100%;
		background-color: #fff;
	}
</style>
